import React from 'react'
import './style.less'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }

  componentDidMount() {
  }

  componentDidUpdate() {
  }

  scoreNumber(point) {
    var pointSigned = point > 0 ? '+' + point : point
    var numbers = (pointSigned + '').split('')
    return numbers.map(num => {
      if (point >= 0) {
        return `img/scoreMajiang/number/${num}.png`
      }
      if (num === '-') {
        return 'img/scoreMajiang/number/-.png'
      }
      return `img/scoreMajiang/number/1${num}.png`
    })
  }

  render() {
    const {battleData, gameInfo, backroom} = this.props
    const {finishList, room} = battleData
    const time = window.util.getDateTime(room.createTime)
    const shareStyle = {width: gameInfo.width, height: gameInfo.height, margin: 'auto'}
    return <div id="share" className="result-wrapper" style={shareStyle}>
      <div className="game-bg">
        <img src="img/scoreMajiang/sharebg.png" className="bg-image" alt=""/>
      </div>
      <div className="game-info">
        <div className="game-info-row">
          <span className="pull-left">帅帅游戏 {gameInfo.name}</span>
          <span className="pull-right">{time}</span>
        </div>
        <div className="game-info-row">
          <span className="pull-left">房号: {room.roomNo}</span>
          <span className="pull-right">局数: {room.turns} / {room.totalTurns}</span>
        </div>        
      </div>
      <div className="game-body pure-g">
        {
          finishList.map((player, index) => {
            const points = this.scoreNumber(player.point)
            const bgSrc = player.point > 0 ? 'img/scoreMajiang/win.png' : 'img/scoreMajiang/lose.png'
            const nicknameCn = player.point > 0 ? 'crimson' : 'black'
            return <div className="pure-u-1-2 relative" key={index}>
              <div className="card">
                <img className="card-bg" src={bgSrc} alt=""/>
                <div className="card-title">
                  <div className={nicknameCn}>{player.nickname}</div>
                  <div>
                    <span className="player-id">ID: {player.lftId}</span>  
                    {
                      player.owner ? <img className="" src="img/scoreMajiang/owner.png" alt=""/> : null
                    }
                  </div>              
                </div>
                <div className="card-body">
                  {
                    player.suitDescribe.map((suit, index) => {
                      return <div key={index}>{suit.name}: {suit.count}</div>
                    })
                  }            
                </div>
                <div className="card-bottom">
                  {
                    points.map((p, index) => {
                      const className = index === 0 ? 'score-number-first' : ''
                      return <img key={index} className={className} src={p} alt=""/>
                    })
                  }
                  {
                    player.winner ? <img className="big-winner" src="img/scoreMajiang/big-winner.png" alt=""/> : null
                  }
                </div>
              </div>
            </div>
          })
        }
      </div>
      <div className="game-bottom pure-g">
        <div className="pure-u-1-2 text-center">
          <img onClick={backroom} src="img/scoreMajiang/back-room.png" alt=""/>
        </div>
        <div className="pure-u-1-2 text-center">
          <img src="img/scoreMajiang/press-share.png" alt=""/>
        </div>
      </div>
    </div>
  }
}

export default App